import * as React from "react";
import { Col, Row, Modal } from "antd";

import HealthAnalysis from "./compontents/HealthAnalysis";
import SafetyAssessment from "./compontents/SafetyAssessment";
import WarnStatistics from "./compontents/WarnStatistics";
import WarnTrendAnalysis from "./compontents/WarnTrendAnalysis";
import { getHealthyData } from "../ServeApi";
import { AjaxData } from "../../../../data/interface/publicInterface";
import moment from "moment";
export interface ElectricalHomeProps {}

export interface ElectricalHomeState {}
interface HealthyData {
  days: number;
  offLine: number;
  onLine: number;
  total: number;
  scoreEle: any;
  scoreLoseEle: any;
  scorePower: any;
  scoreTemperature: any;
}
class ElectricalHome extends React.Component<
  ElectricalHomeProps,
  ElectricalHomeState
> {
  private dataSouce: HealthyData | null = null;
  /**数据请求 */
  //运行健康分析，安全评估
  async getHealthyData() {
    try {
      let pream = {
        start: moment().add(-7, "day").valueOf(),
      };
      let res: any = await getHealthyData(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
        this.dataSouce = json.data;
        this.forceUpdate();
      }
    } catch (error) {
      Modal.error({
        title: `初始化运行健康分析失败，无法读取运行健康分析，请刷新页面。`,
      });
    }
  }
  componentWillMount() {
    this.getHealthyData();
  }
  render() {
    return (
      <div className="ElectricalHome">
        <Row style={{ marginLeft: -10, marginRight: -10, rowGap: 0 }}>
          <Col
            xs={24}
            sm={24}
            md={24}
            lg={24}
            xl={24}
            xxl={18}
            style={{ paddingLeft: 10, paddingRight: 10, marginBottom: 20 }}
          >
            <Row style={{ marginLeft: -10, marginRight: -10, rowGap: 0 }}>
              <Col
                xs={24}
                sm={24}
                md={24}
                lg={24}
                xl={24}
                xxl={10}
                style={{ paddingLeft: 10, paddingRight: 10, marginBottom: 20 }}
              >
                <HealthAnalysis dataSouce={this.dataSouce} />
              </Col>
              <Col
                xs={24}
                sm={24}
                md={24}
                lg={24}
                xl={24}
                xxl={14}
                style={{ paddingLeft: 10, paddingRight: 10, marginBottom: 20 }}
              >
                <SafetyAssessment dataSouce={this.dataSouce} />
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <WarnTrendAnalysis />
              </Col>
            </Row>
          </Col>
          <Col
            xs={24}
            sm={24}
            md={24}
            lg={24}
            xl={24}
            xxl={6}
            style={{ paddingLeft: 10, paddingRight: 10, marginBottom: 20 }}
          >
            <WarnStatistics />
          </Col>
        </Row>
      </div>
    );
  }
}

export default ElectricalHome;
